<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/app.css"/>
		<link href="css/mui.picker.css"   rel="stylesheet"/>
		<link href="css/mui.poppicker.css"  rel="stylesheet"/>
		
	</head>

	<body style="background: #FFFFFF;">
		<header class="mui-bar mui-bar-nav" style="background: #FFFFFF;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 id="title" class="mui-title">正在加载...</h1>
		</header>
		<div class="mui-content">
			        <!-- 播放器 -->
			        <div class="player" style="height:200px">
			            <video id='myVideo'  class="video-js"></video>
			            <link rel="stylesheet" type="text/css" href="./js/VideoJS/video.min.css?v=3">
						<div class="mui-button-row"><button id="showUserPicker" class="mui-btn mui-btn-block mui-btn-primary">选择集数</button></div>
						<div id="video_detail" class="video_detail"> </div>
			        </div>
		</div>
		<script src="js/mui.js"></script>
		<script src="js/mui.picker.js"></script>
		<script src="js/mui.poppicker.js"></script>
		<script type="text/javascript" src="js/app.js"></script>
		<script type="text/javascript">
			mui.init({
				swipeBack:true,
				gestureConfig:{
					swipeleft:true
				}
			})
			document.addEventListener("swipeleft",function(){
			     console.log("你正在向左滑动");
			});
			document.addEventListener('plusready', function(){
			var xhr = new plus.net.XMLHttpRequest();
			xhr.onreadystatechange = function () {
				switch ( xhr.readyState ) {
					case 0:
						console.log( "xhr请求已初始化" );
					break;
					case 1:
						console.log( "xhr请求已打开" );
					break;
					case 2:
						console.log( "xhr请求已发送" );
					break;
					case 3:
						console.log( "xhr请求已响应");
						break;
					case 4:
						if ( xhr.status == 200 ) {
							var data = JSON.parse(xhr.responseText);
							var vPath = data.body.play_lists[0];	
							var logo = '';
							var select = document.getElementById("showUserPicker")
							var title  = document.getElementById("title")
							var myVideo=initVideo({
							  id:'myVideo',
							  url:vPath		
							});
							var picker = new mui.PopPicker();		
							pickdata = [];
							for(var i=0;i<data.body.play_lists.length;i++){
								pickdata.push({
									value:data.body.play_lists[i],
									text:formatNumber(i+1)
								})
							}
							picker.setData(pickdata)

							select.addEventListener("tap",function(){
								picker.show(function(SelectedItem){
									myVideo.src(SelectedItem[0].value)
									myVideo.load(SelectedItem[0].value)
									title.innerHTML = data.body.info.v_name+" "+SelectedItem[0].text
								});
							})
							title.innerHTML = data.body.info.v_name+" 01"
							document.getElementById("video_detail").innerHTML = "简介："+data.body.info.v_content
						} else {
							console.log( "xhr请求失败："+xhr.readyState );
						}
						break;
					default :
						break;
				}
			}
			xhr.open( "GET", "http://maplephoto.me/api/index.php?act=play&data_type=json&vid="+mui.currentWebview.vid);
			xhr.send();
			}, false );
		</script>
		<script type="text/javascript" src="./js/VideoJS/video.min.js?v=1" charset="utf-8" > </script>
		<script type="text/javascript" src="./js/VideoJS/video-conrtib-ads.js?v=1" charset="utf-8" > </script>
		<script type="text/javascript" src="./js/VideoJS/myVideo.js?v=6" charset="utf-8" > </script>
	</body>

</html>
